<template>
	<!-- 收益明细页面 -->
	<view class="content">
		<view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
					收益明细
				<view  class="loa_hui"></view>
			</view>
		</view>
		</view>
		
		<view class="tpul">
			<view :class="[ tpli_active ==index ? 'tpli tpli_active' : 'tpli']"  v-for="(tpul,index) in tpul" :key="index" @tap="changetpli(index)">{{tpul}}</view>
		</view>
		
		<!-- 潮人豆 -->
		<view class="list_ul" v-if="tpli_active ==0">
			<view class="list_li" v-for="(item,index) in item">
				<view class="list_li_left">
					{{item.money}}
				</view>
				<view class="list_li_right">
					收益来源：{{item.text}}  时间：{{item.time}}
				</view>
			</view>
		</view>
		
		<!-- 潮人值 -->
		<view class="list_ul" v-else-if="tpli_active==1">
			<view class="list_li" v-for="(item2,index) in item2">
				<view class="list_li_left">
					{{item2.money}}
				</view>
				<view class="list_li_right">
					收益来源：{{item2.text}}  时间：{{item2.time}}
				</view>
			</view>
		</view>
		
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				tpli_active:0,
				tpul:['潮人豆(1潮人豆=1元)','潮人值'],
				item:[  //潮人豆
					{
						money:'+0.34',
						text:'签到送0.34成长值',
						time:'2020-09-02 08:53:57'
					},
					{
						money:'+0.34',
						text:'签到送0.34成长值',
						time:'2020-09-02 08:53:57'
					}
				],
				item2:[  //潮人值
					{
						money:'+0.34',
						text:'每日登陆',
						time:'2020-09-02 08:53:57'
					},
					{
						money:'+0.34',
						text:'每日登陆',
						time:'2020-09-02 08:53:57'
					}
				]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			changetpli(index){
				this.tpli_active=index;
			},
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.switchTab({
				    url: '../commission/commission'
				});
			}
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.list_ul{
		background-color: #fff;
	}
	.list_li{
		width:90%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #EDEDED;
		padding:20rpx 0;
	}
	.list_li_left{
		width:20%;
		text-align: center;
	    font-weight: 500;
		color: #ff80c0;
		font-size:28rpx;
	}
	.list_li_right{
		width:78%;
		font-size:24rpx;
		color:#666;
	}
	.tpul{
		width:100%;
		border-bottom: 2rpx solid #EDEDED;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
	}
	.tpli{
		width:35%;
		padding:25rpx 0;
		text-align: center;
		white-space: nowrap;
		font-size: 30rpx;
	}
	.tpli_active{
		border-bottom: 4rpx solid #ff80c0;
		color:#ff80c0;
	}
</style>
